<template>
	<view class="page">
		<view class="list">
			<view @click="select(index)" :class="selectIndex == index ? 'select' : ''" :key="index" v-for="(item, index) in list" class="list-item">
				<image class="list-item-left" :src="item.propImg" mode=""></image>
				<view class="list-item-right">
					<view class="title">{{ item.propName }}</view>
					<view class="desc">{{ item.propGrowthValue }}成长值</view>
					<view class="desc">获得数：{{ item.possessNum || 0 }}</view>
					<!-- <view class="button">获得数：{{ item.possessNum || 0 }}</view> -->
				</view>
			</view>
		</view>
		<view v-if="type == 'select'" @click="handleSetting" class="setting">去施肥</view>
		<view class="getting">
			<view class="getting-title">说明:</view>

			<view :key="index" v-for="(item, index) in list" class="getting-desc">{{ item.propName }}可增加果树{{ item.propGrowthValue }}点成长值</view>
		</view>
		<!-- <view @click="handlePlan" class="button-plan"><image src="/static/icons/plan.png" mode=""></image></view> -->
	</view>
</template>

<script>
import { propList, useProp } from '@/service/farm.js';
export default {
	data() {
		return {
			list: [],
			selectIndex: 0,
			finishCount: 0,
			type: ''
		};
	},
	onLoad(options) {
		if (options.type) {
			this.type = options.type;
			this.id = options.id;
		} else {
			this.selectIndex = -1;
		}
		this.getList();
	},
	methods: {
		select(index) {
			if (this.type == 'select') {
				this.selectIndex = index;
			}
		},
		async getList() {
			this.list = await propList({}, { loading: true });
		},
		async handleSetting() {
			if (!this.list[this.selectIndex].possessNum || this.list[this.selectIndex].possessNum == 0) {
				return this.$msg('化肥不足');
			}
			await useProp({ userSeedId: this.id, seedGrowthPropId: this.list[this.selectIndex].id, useNum: 1 });
			this.$msg('施肥成功');
			this.getList();
			setTimeout(v => {
				uni.navigateBack({});
			}, 1000);
		}
	}
};
</script>

<style lang="scss" scoped>
view {
	display: flex;
	box-sizing: border-box;
}
.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: $tree-bg;
}
.getting {
	flex-direction: column;
	width: 710upx;
	margin: 20upx auto;
	background: #e4f6c0;
	border-radius: 20upx;
	display: flex;
	padding: 30upx 40upx;

	&-image {
		background-color: #ffffff;
		border-radius: 50%;
		margin-right: 30upx;
		image {
			height: 110upx;
			width: 80upx;
		}
	}
	&-title {
		color: #4e8308;
		font-size: 34upx;
	}
	&-desc {
		margin-top: 10upx;
		color: #676767;
		font-size: 28upx;
	}
}
.list {
	display: flex;
	flex-wrap: wrap;
	width: 710upx;
	margin: 0 auto;
	justify-content: space-between;
	.list-item {
		height: 230upx;
		width: 350upx;
		margin-bottom: 20upx;
		background: #e4f6c0;
		display: flex;
		border-radius: 20upx;
		padding: 20upx 10upx 20upx 20upx;
		align-items: center;
		&-left {
			height: 180upx;
			width: 150upx;
			margin-right: 2upx;
		}
		&-right {
			display: flex;
			flex-direction: column;
			flex: 1;
			.title {
				color: #588918;

				font-size: 28upx;
			}
			.desc {
				margin-top: 6upx;
				color: #4e8308;
				font-size: 24upx;
			}
			.button {
				margin-top: 10upx;
				font-size: 16upx;
				color: #ffffff;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(to right, #ff6f1f, #ff7121);
				border-radius: 30upx;
				padding: 5upx 10upx;
			}
		}
	}
}
.button-plan {
	width: 330upx;
	height: 80upx;
	margin: 20upx auto 0;
	image {
		width: 330upx;
		height: 84upx;
	}
}
.select {
	background: rgba(114, 202, 52, 0.4) !important;
}
.setting {
	margin: 0 auto;
	display: flex;
	justify-content: center;
	background: linear-gradient(to bottom, #ffea78, #ffe433);
	border-radius: 24upx;
	height: 100upx;
	width: 710upx;
	line-height: 100upx;
	text-align: center;
	color: #ff7030;
	font-size: 30upx;
	top: 1200upx;
	z-index: 1;
}
</style>
